import React from "react";

// UpholdLoginCustom.jsx
// Single-file React component (Tailwind CSS assumed available in the project)
// Default export a component that renders a modern login card for "Uphold" style UI
// Props:
// - bg (string) -> background class or CSS value for the page (defaults to gradient)
// - primaryColor (string) -> Tailwind color class for buttons (defaults to indigo-600)
// - logo (node|string) -> optional logo (JSX or image URL)

export default function UpholdLoginCustom({
  bg = "bg-gradient-to-br from-sky-50 via-white to-emerald-50",
  primaryColor = "bg-indigo-600 hover:bg-indigo-700",
  logo = null,
}) {
  return (
    <div className={`min-h-screen flex items-center justify-center p-6 ${bg}`}>
      <div className="w-full max-w-md">
        <div className="bg-white/80 backdrop-blur-sm shadow-2xl rounded-2xl overflow-hidden border border-white/60">
          {/* Header */}
          <div className="px-8 py-6 flex items-center gap-4 border-b border-white/50">
            <div className="flex-shrink-0">
              {typeof logo === "string" ? (
                <img src={logo} alt="Uphold logo" className="h-10 w-auto" />
              ) : (
                logo || (
                  <div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700 font-semibold">U</div>
                )
              )}
            </div>
            <div>
              <h1 className="text-xl font-semibold text-slate-800">Welcome back to Uphold</h1>
              <p className="text-sm text-slate-500">Sign in to manage your assets</p>
            </div>
          </div>

          {/* Body */}
          <div className="px-8 py-6">
            <form className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-600">Email</label>
                <input
                  type="email"
                  placeholder="you@domain.com"
                  className="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-200"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-600">Password</label>
                <input
                  type="password"
                  placeholder="Enter your password"
                  className="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-200"
                />
              </div>

              <div className="flex items-center justify-between text-sm text-slate-600">
                <label className="flex items-center gap-2">
                  <input type="checkbox" className="h-4 w-4 rounded border-slate-300" />
                  Remember me
                </label>
                <a href="#" className="text-indigo-600 hover:underline">Forgot password?</a>
              </div>

              <div>
                <button
                  type="submit"
                  className={`w-full text-white font-medium py-2 rounded-lg shadow-sm ${primaryColor} transition-colors`}
                >
                  Sign in
                </button>
              </div>

              <div className="flex items-center gap-3 text-sm text-slate-500">
                <div className="h-px flex-1 bg-slate-200" />
                <div>or continue with</div>
                <div className="h-px flex-1 bg-slate-200" />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <button type="button" className="py-2 rounded-lg border border-slate-200 text-sm font-medium">
                  Continue with Google
                </button>
                <button type="button" className="py-2 rounded-lg border border-slate-200 text-sm font-medium">
                  Continue with Apple
                </button>
              </div>

              <div className="text-center text-sm text-slate-600">Don't have an account? <a href="#" className="text-indigo-600 font-medium hover:underline">Create one</a></div>
            </form>
          </div>

          {/* Footer */}
          <div className="px-8 py-4 bg-white/60 border-t border-white/50 text-xs text-slate-500">
            <div className="flex items-center justify-between">
              <div>Secure · Non-custodial · Encrypted</div>
              <div>Need help? <a href="#" className="text-indigo-600 hover:underline">Support</a></div>
            </div>
          </div>
        </div>

        {/* Small hint for developers */}
        <div className="mt-4 text-center text-xs text-slate-500">Tip: pass <code className="rounded bg-slate-100 px-1 py-0.5">bg</code> and <code className="rounded bg-slate-100 px-1 py-0.5">primaryColor</code> props to customize appearance.</div>
      </div>
    </div>
  );
}